<template>

    <rx-dialog @handOk="handOk" @cancel="close" :oktext="$ti18('rxForm.ackBtn','确认')"
               :canceltext="$ti18('rxForm.closeBtn','关闭')"  order="bottom" v-if="dialog">
        <div>
            <a-form-model ref="form" layout="vertical" class="rx-a-form-vertical" >
                <a-form-model-item :label="i18n('form.linkType','链接类型')"  >
                    <a-radio-group v-model="localConfig.type" @change="handType" :options="options"></a-radio-group>
                </a-form-model-item>
                <a-form-model-item :label="i18n('form.openMode','打开方式')"  >
                    <open-mode :local-config="localConfig"></open-mode>
                </a-form-model-item>
            </a-form-model>
            <component ref="curComponent" v-bind="bindSetting"  :is="currentView"></component>
        </div>
    </rx-dialog>

    <div v-else>
        <a-form-model ref="form"  layout="vertical" class="rx-a-form-vertical">
            <a-form-model-item :label="i18n('form.linkType','链接类型')">
                <a-radio-group v-model="localConfig.type" @change="handType" :options="options"></a-radio-group>
            </a-form-model-item>
            <a-form-model-item :label="i18n('form.openMode','打开方式')">
                <open-mode :local-config="localConfig"></open-mode>
            </a-form-model-item>
        </a-form-model>
        <component ref="curComponent" v-bind="bindSetting"  :is="currentView"></component>
    </div>

</template>

<script>
    import linkCustomComponent from "@/views/modules/form/core/cellRender/linkCustomComponent";
    import linkFormComponent from "@/views/modules/form/core/cellRender/linkFormComponent";
    import linkListComponent from "@/views/modules/form/core/cellRender/linkListComponent";
    import linkUrlComponent from "@/views/modules/form/core/cellRender/linkUrlComponent";
    import linkBase from "@/views/modules/form/core/cellRender/linkBase";
    import {Util} from "@lowcode/jpaas-common-lib"
    import OpenMode from "@/views/modules/form/core/listCommon/OpenMode";

    export default {
      name: "renderConfig_link",
      components:{
          OpenMode,
            linkCustomComponent,
            linkFormComponent,
            linkListComponent,
            linkUrlComponent
      },
      mixins:[linkBase],
      props:{
          destroy:{type:Function},
          layerid:{type:String},
          /**
           {type:"form",
           isMax:"YES",
           width:800,
           height:600,
           model:true,
           setting:{}}
           */
          config:{
              type:[Object,String],
              default:()=>{
                  return null;
              }
          },
          //列表字段
          fields:{
              type: Array
          },
          //列表字段
          listId:{
              type:String
          },
          //是否为对话框
          dialog:{
              type:Boolean,
              default:false
          }
      },
      data(){
          return {
              //配置信息
              localConfig:{
                  type:"form",
                  isMax:"YES",
                  width:800,
                  height:600,
                  model:true,
                  setting:{}
              },
              localFields: [],
              options:[
                  {label:this.i18n('form.formScheme','表单方案'),value:"form"},
                  {label:this.$comi18('rxDialog.dialogList', '列表'),value:"list"},
                  {label:this.i18n('form.customForm','定制表单'),value:"custom"},
                  {label:this.i18n('form.external','外部链接'),value:"url"}],
              //绑定设置
              bindSetting:{
                  config:{},
                  fields: []
              },

          }
      },
      created(){

        if(this.fields){
            this.localFields=this.fields;
        }
        this.init();
      },
      computed:{
          currentView(){
              if(!this.localConfig.type){
                  return "link-form-component";
              }
              return `link-${this.localConfig.type}-component`;
          }
      },
      methods:{
          i18n(name,text,key){
              return this.$ti18(name,text,"formCellRender",key);
          },
          init(){
              if(this.config){
                  Object.assign(this.localConfig,this.config);
              }


              //设置绑定数据
              this.bindSetting.config=this.localConfig.setting;
              this.bindSetting.fields=[];
              this.bindSetting.fields.push(...this.localFields);
          },
          handType(e){
              this.bindSetting.config="";
          },
          setData(config,fields){
              if(config.type){
                  this.localConfig=config;
              }
              this.localFields=fields;
              this.init();
          },
          async validate(callback,vm){
              let curComponent=this.$refs.curComponent;
              try{
                  await  curComponent.valid();
              }
              catch (e) {
                  vm.loading=false;
                  return ;
              }
              if(callback){
                  callback()
              }
          },
          /**
           * {
           *    type:"",
           *    setting:{}
           * }
           */
          getData(){
              let rtn=this.localConfig;
              let curComponent=this.$refs.curComponent;
              rtn.setting=curComponent.getData();
              Object.assign(rtn,rtn.setting)
              return rtn;
          },
          close(){
              Util.closeWindow(this,"cancel");
          },

          async handOk(vm){
              let curComponent=this.$refs.curComponent;

              try{
                  await  curComponent.valid();
              }
              catch (e) {
                  vm.loading=false;
                  return ;
              }
              Util.closeWindow(this,"ok")
          }
      },
    }
</script>

<style scoped>

</style>